<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ChatLife</title>
    <link id="title-icon" rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/sources/cropper/cropper.min.css" /><!-- 图片截取样式表文件 -->
    <link rel="stylesheet" href="/chat/static/sources/chat.css" /><!-- 主要样式表文件 -->
    <link rel="stylesheet" type="text/css" href="/static/sources/message-box.css"><!-- 消息框样式表文件 -->
    <link rel="stylesheet" type="text/css" href="/static/sources/button/button.css"><!-- 按钮样式表文件 -->
    <script src="/static/sources/message-box.js"></script><!-- 消息框JS文件 -->
    <script src="/static/sources/jquery-3.6.0.min.js"></script><!-- JQ支持 -->
    <script src="/static/sources/msgManager.js"></script><!-- 服务器返回信息预处理JS文件 -->
    <script src="/static/sources/webserver.js"></script><!-- 服务器交互JS文件 -->
    <script src="/static/sources/cookie.js"></script><!-- Cookie交互JS文件 -->
    <script src="/static/sources/button/button.js"></script><!-- 按钮JS文件 -->
    <script src="/static/sources/pagetheme.js"></script><!-- 页面模式JS文件 -->
    <script src="/static/sources/confirm.js" defer></script><!-- 信息确认JS文件 -->
    <script src="/static/sources/errorManager.js" defer></script><!-- 错误处理JS文件 -->
    <script src="/chat/static/sources/onresize.js" defer></script><!-- 适配窗口JS文件 -->
    <script src="/chat/static/sources/update.js" defer></script><!-- 同步更新JS文件 -->
    <script src="/static/sources/cropper/cropper.min.js" defer></script><!-- 图片处理JS文件 -->
    <script src="/static/sources/imgcompress.js" defer></script><!-- 图片压缩JS文件 -->
    <script>
        const MSG_TONE = new Audio('/chat/static/audio/msgTone.mp3');//新消息
        const OHAYOU = new Audio('/chat/static/audio/ohayou.mp3');//早上好
        const OTSUKARE = new Audio('/chat/static/audio/otsukare.mp3');//辛苦了
        const OKAIRI = new Audio('/chat/static/audio/okairi.mp3');//欢迎回来
        const KONBANWA = new Audio('/chat/static/audio/konbanwa.mp3');//晚上好
        const KONICHIWA = new Audio('/chat/static/audio/konichiwa.mp3');//你好
        let image_plus_fixer = "";
    </script>
</head>



<body>
    <div id="register-or-login">
        <script>$("#register-or-login").load("/static/sources/login/login.html");</script>
    </div>

    <!-- 窗口顶部栏 -->
    <header id="header">
        <script>$("#header").load("/static/sources/header/header.html");</script>
    </header>
    <!-- 用户状态侧栏 -->
    <div id="side-status">
        <div id="side-userInfo">
            <div id="upload-profile-photo">
                <input style="display:none;" type="file" id="profile-head-photo-upload" accept="image/*">
                <img id="profile-photo" src="/chat/static/images/head/default.ico"
                    onerror="this.src='/chat/static/images/head/default.ico';this.onerror=null;" width="20px"
                    height="20px">
                <button style="opacity: 0;width:64px;height:64px;margin:0;border:0;padding:0;outline:none;z-index:1;"
                    onclick="$('#profile-head-photo-upload').trigger('click');"></button>
                <script>
                    document.getElementById("profile-head-photo-upload").onchange = function () {
                        let imgFile = this.files[0];
                        $("#profile-head-photo-upload").val("");
                        if (imgFile) {
                            imgCompress(imgFile, 0.7, function (file) {
                                var reader = new FileReader();
                                reader.readAsDataURL(file);
                                reader.onload = function () {
                                    let cropper_box_bg = document.createElement('div'),
                                        cropper_box = document.createElement('div'),
                                        doCropper_box = document.createElement('div'),
                                        doConfirm_box = document.createElement('div'),
                                        cropper_image = document.createElement("img"),
                                        cropper_image_preview = document.createElement("div"),
                                        cropper_confirm = document.createElement("button"),
                                        cropper_remove = document.createElement("button");
                                    if (darkMode) {
                                        cropper_box_bg.style = "position: fixed;width: 100%;height: 100%;top:0;z-index: 256;background-color: rgba(0, 0, 0, 0.7);background-repeat: no-repeat;background-attachment: fixed;background-size: cover;margin: 0;border: 0;padding: 0;display: flex;align-items: center;justify-content: center;";
                                        cropper_box.style = "width:50%;height:50%;min-width:400px;min-height:400px;z-index:1;margin:0;border:1px solid magenta;padding:0;background-color:rgba(255,0,255,0.4);backdrop-filter:blur(5px);border-radius:20px;display:flex;flex-direction:column;align-items: center;justify-content: space-around;overflow:hidden;";
                                        doCropper_box.style = "width:100%;height:70%;overflow:hidden;";
                                        doConfirm_box.style = "width:100%;height:30%;display:flex;align-items:center;justify-content:space-around;overflow:hidden;";
                                        cropper_image_preview.style = "width:64px;height:64px;overflow:hidden;border-radius:50%;";
                                        cropper_confirm.style = "background-color:rgba(0,0,0,0.4);color:white;border:1px solid magenta;font-size:30px;";
                                        cropper_remove.style = "background-color:rgba(0,0,0,0.4);color:white;border:1px solid magenta;font-size:30px;";
                                    } else {
                                        cropper_box_bg.style = "position: fixed;width: 100%;height: 100%;top:0;z-index: 256;background-color: rgba(0, 0, 0, 0.7);background-repeat: no-repeat;background-attachment: fixed;background-size: cover;margin: 0;border: 0;padding: 0;display: flex;align-items: center;justify-content: center;";
                                        cropper_box.style = "width:50%;height:50%;min-width:400px;min-height:400px;z-index:1;margin:0;border:1px solid aqua;padding:0;background-color:rgba(0,255,255,0.4);backdrop-filter:blur(5px);border-radius:20px;display:flex;flex-direction:column;align-items: center;justify-content: space-around;overflow:hidden;";
                                        doCropper_box.style = "width:100%;height:70%;overflow:hidden;";
                                        doConfirm_box.style = "width:100%;height:30%;display:flex;align-items:center;justify-content:space-around;overflow:hidden;";
                                        cropper_image_preview.style = "width:64px;height:64px;overflow:hidden;border-radius:50%;";
                                        cropper_confirm.style = "background-color:rgba(255,255,255,0.4);color:black;border:1px solid aqua;font-size:30px;";
                                        cropper_remove.style = "background-color:rgba(255,255,255,0.4);color:black;border:1px solid aqua;font-size:30px;";
                                    }
                                    cropper_remove.onclick = function () { $(cropper_box_bg).remove(); }
                                    cropper_confirm.innerText = "上传";
                                    cropper_remove.innerText = "取消";
                                    cropper_image.src = this.result;
                                    doCropper_box.appendChild(cropper_image);
                                    doConfirm_box.appendChild(cropper_image_preview);
                                    doConfirm_box.appendChild(cropper_confirm);
                                    doConfirm_box.appendChild(cropper_remove);
                                    cropper_box.appendChild(doCropper_box);
                                    cropper_box.appendChild(doConfirm_box);
                                    cropper_box_bg.appendChild(cropper_box);
                                    document.body.appendChild(cropper_box_bg);
                                    let _cropper = new Cropper(cropper_image, {
                                        aspectRatio: 1 / 1,
                                        viewMode: 1,
                                        preview: cropper_image_preview,
                                        dragMode: "move",
                                        guides: false
                                    });
                                    cropper_confirm.onclick = function () {
                                        let img = _cropper.getCroppedCanvas(imageSmoothingQuality = "high").toDataURL('image/ico').replace(/data.+?;base64,/, "");
                                        wsSender({ "action": "update-userInfo", "username": username, "type": "update-user-head-img", "src": img });
                                        $(cropper_box_bg).remove();
                                    }
                                }
                            });
                        }
                    }
                </script>
            </div>
            <h1 id="side-username"></h1>
            <div id="side-userIdentify">
                <div id="user-status">
                    <div id="user-status-choose">
                        <div style="background-color:green" onclick="updateStatus(120)">在线</div>
                        <div style="background-color:yellow" onclick="updateStatus(121)">忙碌</div>
                        <div style="background-color:red" onclick="updateStatus(122)">离开</div>
                        <div style="background-color:white" onclick="updateStatus(123)">隐身</div>
                    </div>
                    <script>
                        $("#user-status-choose").hide()
                        $("#user-status").mouseenter(function () {
                            $("#user-status").css('overflow', "visible");
                            $("#user-status-color").hide(0);
                            $("#user-status-text").hide(0);
                            $("#user-status-choose").show(0);
                        });
                        $("#user-status").mouseleave(function () {
                            $("#user-status").css('overflow', "visible");
                            //$("#user-status").css('position', "relative");
                            $("#user-status-color").show(0);
                            $("#user-status-text").show(0);
                            $("#user-status-choose").hide(0);
                        });
                        function updateStatus(status_code) {
                            wsSender({ "action": "update-userInfo", "type": "update-user-status", "username": username, "user-status": status_code });
                            $("#user-status-choose").hide(0);
                            $("#user-status-color").show(0);
                            $("#user-status-text").show(0);
                        }
                    </script>
                </div>
            </div>
            <div id="side-status-display"></div>
        </div>
        <div id="friends">
            <script>
                function getMyFriend() {
                    wsSender({ "action": "getFriends", "username": username });
                }
            </script>
        </div>
        <script>
            $("#side-status").mouseleave(function () {
                $("#side-status-shadow").stop(true);
                $("#side-status-shadow").animate({ "border-left-width": "2px" });
                $("#side-status").stop(true);
                $("#side-status").animate({ "width": "0px" });
            });
            $("#side-status").mouseenter(function () {
                $("#side-status-shadow").stop(true);
                $("#side-status-shadow").animate({ "border-left-width": "10px" });
                $("#side-status").stop(true);
                $("#side-status").animate({ "width": "300px" });
            });
        </script>
    </div>

    <!-- 用于用户状态侧栏展开后左侧的亮影 -->
    <div id="side-status-shadow"></div>

    <!-- 设置侧栏 -->
    <div id="side-settings">
        <div class="switchButton-box">
            <span class="switchButton-name">深色模式</span>
            <div class="switchButton-frame" id="settings-darkMode">
                <div class="switchButton-slider"></div>
                <script>
                    settings_darkMode = new switchButton("settings-darkMode");
                    if(darkMode) settings_darkMode.on();
                    $("#settings-darkMode").mousedown(function() {
                        settings_darkMode.toggle();
                        if(darkMode) document.documentElement.setAttribute("theme","light");
                        else document.documentElement.setAttribute("theme","dark");
                        darkMode = !darkMode;
                    });
                </script>
            </div>
        </div>
        <script>
            $("#side-settings").mouseleave(function () {
                $("#side-settings-shadow").stop(true);
                $("#side-settings-shadow").animate({ "border-right-width": "2px" });
                $("#side-settings").stop(true);
                $("#side-settings").animate({ "width": "0px" });
            });
            $("#side-settings").mouseenter(function () {
                $("#side-settings-shadow").stop(true);
                $("#side-settings-shadow").animate({ "border-right-width": "10px" });
                $("#side-settings").stop(true);
                $("#side-settings").animate({ "width": "300px" });
            });
        </script>
    </div>
    
    <!-- 用于设置侧栏展开后右侧的亮影 -->
    <div id="side-settings-shadow"></div>


    <!-- 显示一些消息 -->
    <div id="messageBar-main"></div>

    <!-- 主要 -->
    <div id="body-cover">
        <button id="getHistory" onclick="getHistory()">加载历史记录</button>
        <div id="goto-bottom">
            <button onclick="document.getElementById('main').scrollTop=document.getElementById('main').scrollHeight+50;$('#goto-bottom').fadeOut(1000);$('title').text('ChatLife');">
                滚
                动
                到
                底
                部
                V
                V
            </button>
        </div>
        <div id="bottom-insert">
            <div id="upload-image">
                <input style="display:none;" type="file" id="img-upload" accept="image/*">
                <img style="pointer-events:none;" src="/chat/static/images/img_upload.ico" width="20px" height="20px">
                <button style="opacity: 0;width:100%;height:100%;z-index:1;"
                    onclick="$('#img-upload').trigger('click');"></button>
                <script>
                    document.getElementById("img-upload").onchange = function () {
                        let imgFile = this.files[0];
                        if (imgFile) {
                            imgCompress(imgFile, 0.7, function (file) {
                                var reader = new FileReader();
                                reader.readAsDataURL(file);
                                reader.onload = function () {
                                    $("#userInput").html($("#userInput").html() + '<img name="insert-image" src="' + this.result + '"> ');
                                }
                            });
                            document.getElementById("img-upload").value = "";
                        }
                    }
                </script>
            </div>
            <div id="black-cover">
                <div style="position: absolute;left: 0px;outline: none;resize: none;width: 80%;height: 100%;z-index: 2;margin: 0px;border: 0px;padding: 0px;white-space: nowrap;overflow: auto;display: flex;align-items: center;"
                    contenteditable="plaintext-only"></div>
                <button id="blackCover-submit"
                    style="width:20%;height:100%;z-index:2;position:absolute;right:0;margin:0;border:0;padding:0;">插入</button>
                <button id="blackCover" style="width:32px;height:32px;z-index:1;opacity:0;"></button>
                <img style="z-index:0;" src="/chat/static/images/black_cover.ico" width="20px" height="20px">
                <script>
                    $($("#black-cover").children()[0]).hide();
                    $($("#black-cover").children()[1]).hide();
                    document.getElementById("blackCover").onclick = function () {
                        $($(this).parent()[0]).animate({ "width": "200px", "border-radius": "5px" });
                        $($("#black-cover").children()[0]).show();
                        $($("#black-cover").children()[1]).show();
                        $($("#black-cover").children()[3]).hide();
                    }
                    document.getElementById("blackCover-submit").onclick = function () {
                        let msg = $($(this).prev());
                        if (msg.text() !== "") {
                            $("#userInput").html($("#userInput").html() + '<span style="color: black;background-color: black;-webkit-user-modify: read-only;" onmouseenter="$(this).css(\'color\',\'white\');" onmouseleave="$(this).css(\'color\',\'black\')">' + msg.text() + "</span>");
                        }
                        $(msg).text("");
                        $(msg).hide();
                        $(this).hide();
                        $($(this).parent()[0]).animate({ "width": "32px", "border-radius": "16px" });
                        $($("#black-cover").children()[3]).show();
                    }

                </script>
            </div>
            <div id="color-changer">
                <div style="position: absolute;left: 0px;outline: none;resize: none;width: calc(100% - 80px);height: 100%;z-index: 2;margin: 0px;border: 0px;padding: 0px;white-space: nowrap;overflow: auto;display: flex;align-items: center;"
                    contenteditable="plaintext-only"></div>
                <input type="color" value="#000000" id="color-change-button" style="width:20px;height:100%;z-index:2;position:absolute;right:50px;margin:0;border:0;padding:0;">
                <button id="colorChanger-submit"
                    style="width:50px;height:100%;z-index:2;position:absolute;right:0;margin:0;border:0;padding:0;">插入</button>
                <button id="colorChange" style="width:32px;height:32px;z-index:1;opacity:0;"></button>
                <img style="z-index:0;" src="/chat/static/images/color-change.ico" width="20px" height="20px">
                <script>
                    $($("#color-changer").children()[0]).hide();
                    $($("#color-changer").children()[1]).hide();
                    $($("#color-changer").children()[2]).hide();
                    document.getElementById("colorChange").onclick = function () {
                        $($(this).parent()[0]).animate({ "width": "200px", "border-radius": "5px" });
                        $($("#color-changer").children()[0]).show();
                        $($("#color-changer").children()[1]).show();
                        $($("#color-changer").children()[2]).show();
                        $($("#color-changer").children()[4]).hide();
                    }
                    document.getElementById("colorChanger-submit").onclick = function () {
                        let msg = $($("#color-change-button").prev());
                        if (msg.text() !== "") {
                            $("#userInput").html($("#userInput").html() + '<span style="color:'+$("#color-change-button").val()+';-webkit-user-modify: read-only;">' + msg.text() + "</span>");
                        }
                        $("#color-change-button").val("#000000");
                        msg.text("");
                        msg.hide();
                        $($("#color-changer").children()[1]).hide();
                        $(this).hide();
                        $($(this).parent()[0]).animate({ "width": "32px", "border-radius": "16px" });
                        $($("#color-changer").children()[4]).show();
                    }
                </script>
            </div>
            <div id="rich-text">
                <script>
                    var bottom_input_ifRich = false;
                    function toggleBottomInput() {
                        if (bottom_input_ifRich) {
                            $($("#rich-text").children("img")[0]).attr("src", "/chat/static/images/to_rich.ico");
                            $("#bottom-insert").animate({ "bottom": "130px" }, 1000);
                            $("#main").slideDown(1000);
                            $("#bottom-input").animate({ "height": "80px" }, 1000);
                            bottom_input_ifRich = false;
                        } else {
                            $($("#rich-text").children("img")[0]).attr("src", "/chat/static/images/to_normal.ico");
                            $("#main").slideUp(1000);
                            $("#bottom-insert").animate({ "bottom": "85%" }, 1000);
                            $("#bottom-input").animate({ "height": "80%" }, 1000);
                            bottom_input_ifRich = true;
                        }
                    }
                </script>
                <button style="z-index:1;opacity:0;width:100%;height:100%;" id="richtext"
                    onclick="toggleBottomInput()"></button>
                <img style="z-index:0;" src="/chat/static/images/to_rich.ico" width="20px" height="20px">
            </div>
        </div>
        <div id="bottom-input">
            <div id="userInput" contenteditable="plaintext-only"></div>
        </div>
        <div id="bottom-submit">
            <button id="userSubmit">发送</button>
        </div>
        <div class="main" id="main">
            <script>
                $("#bottom-submit").mouseenter(function () {
                    $(this).css("background-color", "rgba(0,0,255,0.3)");
                    $(this).css("box-shadow", "0 0 10px 10px rgba(0, 0, 255, 0.3)");
                });

                $("#bottom-submit").mouseleave(function () {
                    if (darkMode) {
                        $(this).css("background-color", "rgba(200, 0,255,0.3)");
                        $(this).css("box-shadow", "0 0 10px 10px rgba(200, 0, 255, 0.3)");
                    }
                    else {
                        $(this).css("background-color", "rgba(0,200,255,0.3)");
                        $(this).css("box-shadow", "0 0 10px 10px rgba(0, 200, 255, 0.3)");
                    }
                });
                var messages = document.createElement('ul');
                messages.id = 'main-message-list';
                $("#goto-bottom").hide();
                document.getElementById("main").appendChild(messages);

                function recallMessage(element) {
                    let messageElement = $(element).parent()[0];
                    $(element).remove();
                    wsSender({ "action": "recallMsg", "username": username, "id": messageElement.id });
                }

                function removeMessage(element) {
                    let messageElement = $(element).parent()[0];
                    $(element).remove();
                    $(messageElement).css("color", "gray");
                    $(messageElement).html("已关闭此消息的显示");
                    $(messageElement).slideUp(1000, function () {
                        $(messageElement).remove();
                    });
                }

                function check_goto_bottom_should_show(plusCheck = 100) {
                    if (document.getElementById("main").scrollTop + document.getElementById("main").clientHeight + plusCheck >= document.getElementById("main").scrollHeight) {
                        $("#goto-bottom").fadeOut(1000);
                        $("title").text("ChatLife");
                    } else {
                        $("#goto-bottom").fadeIn(1000);
                        $("title").text("有新消息 - ChatLife");
                    }
                }

                function addMessage(event) {
                    var messages = document.getElementsByTagName('ul')[0],
                        message = document.createElement('div'),
                        time = document.createElement('span'),
                        user_info = document.createElement('div'),
                        user_profile_photo = document.createElement('img'),
                        user_name = document.createElement('span'),
                        user_message = document.createElement('div'),
                        buttons = document.createElement('div'),
                        recallBtn = document.createElement("button"),
                        removeBtn = document.createElement("button");
                    user_info.className = "msg-user-info";
                    time.className = "msg-time"
                    time.innerHTML = event["message"][0];
                    user_profile_photo.className = "msg-user-profile-photo";
                    switch (event["user-status"]) {
                        case 120:$(user_profile_photo).css("border", "2px solid rgb(0,255,0)");break;
                        case 121:$(user_profile_photo).css("border", "2px solid rgb(255,255,0)");break;
                        case 122:$(user_profile_photo).css("border", "2px solid rgb(255,0,0)");break;
                        case 123:$(user_profile_photo).css("border", "2px solid rgb(100,100,100)");break;
                    }
                    user_profile_photo.onerror = function () { this.src = "/chat/static/images/head/default.ico"; }
                    user_profile_photo.src = "/chat/static/images/head/" + event["userID"] + ".ico"+image_plus_fixer;
                    user_name.className = "msg-user-name";
                    user_name.innerHTML = event["message"][1];
                    $(user_name).mouseenter = function () {
                        $(user_name).css('overflow', "visible");
                    }
                    //$(user_profile_photo).mouseenter = function() {
                    //    $(user_friend_cover).slideDown(1000);  TODO
                    //}
                    $(user_info).mouseenter = function () {
                        $(user_info).css('overflow', "visible");
                    }
                    user_info.appendChild(user_profile_photo);
                    user_info.appendChild(user_name);
                    user_info.appendChild(time);
                    user_message.innerHTML = event["message"][2];
                    user_message.className = "msg-user-message-";
                    user_message.className+=event["msg_type"];// BUG NOTE::self错误地显示为normal，发信错误，看一下chat.py,line 66
                    buttons.className = "msg-Btn-box";
                    recallBtn.className = "msg-recallBtn";
                    recallBtn.innerHTML = "<=";
                    recallBtn.name = "msg-recallMsg";
                    recallBtn.onclick = function () { recallMessage($(this).parent()[0]); }
                    removeBtn.className = "msg-removeBtn";
                    removeBtn.innerHTML = "x";
                    removeBtn.name = "removeMsg";
                    removeBtn.onclick = function () { removeMessage($(this).parent()[0]); }
                    if (event["username"] === username || isAdmin === true) {
                        buttons.appendChild(recallBtn);
                    }
                    buttons.appendChild(removeBtn);
                    message.appendChild(user_info);
                    message.appendChild(user_message);
                    message.appendChild(buttons);
                    message.className = event["tag"];
                    message.id = String(event["id"]);
                    //$(message).animate({"width":"toggle"},0);
                    $(message).animate({ "right": "100px" }, 0);
                    messages.appendChild(message);
                    //$(message).animate({"width":"toggle"},"fast");
                    $(message).animate({ "right": "0" }, 200);
                    if (document.getElementById("main").scrollTop + document.getElementById("main").clientHeight + 100 >= document.getElementById("main").scrollHeight - $(message).height()) {
                        document.getElementById('main').scrollTop = document.getElementById("main").scrollHeight;
                    }
                    check_goto_bottom_should_show($(message).height() + 100);
                    MSG_TONE.play()
                }

                function getHistory() {
                    let msgs = document.getElementsByClassName("public");
                    if (msgs.length === 0) {
                        wsSender({ "action": "getHistory", "username": username, "id": null });
                    } else {
                        wsSender({ "action": "getHistory", "username": username, "id": msgs[0].id });
                    }
                }

                function addHistory(event) {
                    let msgs = event["messages"];
                    if (msgs.length === 0) {
                        $("#getHistory").css("color", "rgb(100,100,100)");
                        $("#getHistory").text("没有更多消息了");
                        $("#getHistory").slideUp(1000);
                        return 0;
                    }
                    for (let msg_index in msgs) {
                        var msg = msgs[msg_index];
                        var messages = document.getElementsByTagName('ul')[0],
                            message = document.createElement('span'),
                            time = document.createElement('span'),
                            user_info = document.createElement('div'),
                            user_profile_photo = document.createElement('img'),
                            user_name = document.createElement('span'),
                            user_message = document.createElement('div'),
                            buttons = document.createElement('div'),
                            recallBtn = document.createElement("button"),
                            removeBtn = document.createElement("button");
                        user_info.className = "msg-user-info";
                        time.className = "msg-time";
                        time.innerHTML = msg[0];
                        user_profile_photo.className = "msg-user-profile-photo";
                        user_profile_photo.onerror = function () { this.src = "/chat/static/images/head/default.ico"; }
                        user_profile_photo.src = "/chat/static/images/head/" + msg[3] + ".ico"+image_plus_fixer;
                        user_name.className = "msg-user-name";
                        user_name.innerHTML = msg[1];
                        user_info.appendChild(user_profile_photo);
                        user_info.appendChild(user_name);
                        user_info.appendChild(time);
                        message.className = "msg";
                        user_message.innerHTML = msg[2];
                        user_message.className = "msg-user-message-";
                        user_message.className+="history";
                        buttons.className = "msg-Btn-box";
                        recallBtn.className = "msg-recallBtn";
                        recallBtn.innerHTML = "<=";
                        recallBtn.name = "recallMsg";
                        recallBtn.onclick = function () { recallMessage($(this).parent()[0]); }
                        removeBtn.className = "msg-removeBtn"
                        removeBtn.innerHTML = "x";
                        removeBtn.name = "removeMsg";
                        removeBtn.onclick = function () { removeMessage($(this).parent()[0]); }
                        if (msg[1] === username || isAdmin === true) buttons.appendChild(recallBtn);
                        buttons.appendChild(removeBtn)
                        message.appendChild(user_info);
                        message.appendChild(user_message);
                        message.appendChild(buttons);
                        message.className = "public";
                        message.id = msg[5];
                        $(message).hide();
                        $(messages).prepend(message);
                        $(message).slideDown("fast");
                        check_goto_bottom_should_show();
                    }
                }

                document.addEventListener("keydown", function (e) {
                    if (e.keyCode === 13 && e.shiftKey) {
                        let val = $("#userInput").html();
                        if (!val) { warningBox("不能发送空消息"); return null; }
                        e.cancelBubble = true;
                        e.preventDefault();
                        e.stopPropagation();
                        $("#userInput").html("");
                        wsSender({ "action": "send", "username": username, "message": val });
                        return false;
                    }
                });

                document.addEventListener("wheel", function (e) {
                    check_goto_bottom_should_show();
                });

                document.getElementById('userSubmit').onclick = function () {
                    let val = $("#userInput").html();
                    if (!val) { warningBox("不能发送空消息"); return null; }
                    $("#userInput").html("");
                    wsSender({ "action": "send", "username": username, "message": val });
                    return false;
                }
                //atExit
                window.onbeforeunload = function () {
                    setCookie("darkMode", darkMode, 7);
                    wsDisconnect(username);
                }
            </script>
        </div>
        <span id="tip">按Enter换行, Shift+Enter发送消息</span>
    </div>

    <!-- 网页底端部分 -->
    <footer id="footer">
        <script>$("#footer").load("/static/sources/footer/footer.html")</script>
    </footer>
</body>

</html>